﻿<!DOCTYPE html>
<html>
<head>
    <title>132123</title>
    <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
    <script src="../../jsrender.js" type="text/javascript"></script>
    <script src="../../jquery.observable.js" type="text/javascript"></script>
    <script src="../../jquery.views.js" type="text/javascript"></script>
    <link href="../resources/demos.css" rel="stylesheet" type="text/css" />
    <script id="movieTemplate" type="text/html">
	<li>
		<i>电影名称：{{:name}}</i> ({{:releaseYear}})
	</li>
</script>
</head>
<body>
    <div class="nav">
        <a href="../demos.html">JsViews Demos</a></div>
    <!--Note that a template does not have to include HTML elements-->
    <script id="textOnlyTemplate" type="text/x-jsrender">
	- {{:name}} ({{:releaseYear}})
</script>
    <h3>
        Rendering templates, and linking to changes in data:</h3>
    <div class="subhead">
        Insert HTML from a rendered template, as innerHTML under a container element. (Uses
        only JsRender.)</div>
    <div class="box">
        <ul id="renderedListContainer">
        </ul>
    </div>
    <div class="subhead">
        Insert HTML from a rendered template between other content, and then data-link the
        content, for live updates. (Uses JsViews for data-linking.)</div>
    <div class="buttons">
        <button onclick="addMovie()">
            add Movie</button>
        <button onclick="removeMovie()">
            remove last Movie</button>
    </div>
    <div class="box">
        <b>Our Movies</b><br />
        The current movies are <span id="linkedListPlaceholder"></span>... <em>more to follow!</em>
    </div>
    <div class="subhead">
        Use JsViews to link content of an HTML container element directly to data, by associating
        with a template.</div>
    <div class="box">
        <ul id="linkedListContainer">
        </ul>
    </div>
    <script type="text/javascript">

        var counter = 0,
		movies = [
			{ name: "The Red Violin", releaseYear: "1998" },
			{ name: "Eyes Wide Shut", releaseYear: "1999" },
			{ name: "The Inheritance", releaseYear: "1976" },
            	{ name: "The Inher11111itance", releaseYear: "1976" }
		];

        // JsRender: Render the template with the movies data and insert
        // the rendered HTML under the "movieList" element
        $.templates({
            movieTemplate: "#movieTemplate",
            textOnlyTemplate: "#textOnlyTemplate"
        });

        $("#renderedListContainer").html(
        $("#movieTemplate").render(movies)
//		$.render.movieTemplate(movies)
	);

        // Render the template with the movies data, as data-linked content
        // replacing an HTML placeholder element
        $.link.textOnlyTemplate(movies, "#linkedListPlaceholder"，{ target: "replace" });

        // Render the template with the movies data, as data-linked content
        // of an HTML container element
        $.link.movieTemplate(movies, "#linkedListContainer");

        // Modify the data
        function addMovie() {
            $.observable(movies).insert(movies.length, {
                name: "NewTitle11" + counter++,
                releaseYear: "YYYY11"
            });
        }

        function removeMovie() {
            $.observable(movies).remove(movies.length - 1, 1);
        }
</script>
</body>
</html>
